<script setup>
import {useRouter,useRoute} from 'vue-router'
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import {delArticleApi,modyfyArticleApi,getArticleApi} from '@/api/article.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const userStore = useUserStore()
const userInfo = userStore.userInfo

const route = useRoute()
const router = useRouter()

//获取帖子id
const articleId = ref()
articleId.value = parseInt(route.query.articleId)

console.log(articleId.value)
//回退
const goBack = ()=>{
  router.push('/').then(()=>{
     router.go(0)
  })
}


//判断是否为管理员
const isAdmin = ref(false)
judgeIsAdmin()
function judgeIsAdmin(){
    const roleList = userInfo.roles
    if(roleList.length === 0){
        return ElMessage.warning('您没有角色信息！请联系管理员')
    }
    roleList.forEach(role => {
        if(role.name === 'admin'){
            isAdmin.value = true
        }
    });  
}

//控制是否出现删除编辑按钮
const showButton = ref(false)
isShow()
async function isShow(){
  try{
    const resp = await getArticleApi(articleId.value)
    if(resp.data.data.user.id === userInfo.id || isAdmin.value){
      showButton.value = true
    }
  }catch(e){
    console.log(e)
  }
}
// 删除帖子
const onDel = ()=>{
  ElMessageBox.confirm(
        '确认删除？',
        '警告',
        {
          confirmButtonText:'删除',
          cancelButtonText:'取消',
          type:'warning'
        }
      ).then( async()=>{
        //删除帖子
        try{
        console.log(articleId)
        const resp = await delArticleApi(articleId.value)
        console.log(resp)
        if(resp.data.code == 200 ){
            ElMessage.success('删除成功,即将返回主页')
            setTimeout(() => {
              router.push('/').then(()=>{
                router.go(0)
              })
              
            }, 1000);
        }
      }catch(e){
        console.log(e)
        ElMessage.error(e.message)
        }
      }).catch(()=>{})
}

//编辑帖子
const onEdit = ()=>{
  router.push({path:'/addArticle',query:{
          articleId:articleId.value
  }}).then(()=>{
    router.go(0)
  })
}
</script>
<template>
  <el-page-header
  @back="goBack"
  class="nav"
  title="返回"
  >
    <template #content>
      <el-menu
      :default-active="route.path"
      router
      @select="handleSelect"
      >
      <el-menu-item index="/detailBox/article">详情</el-menu-item>
      </el-menu>
      <div class="flex items-center">
            
      </div>
    </template>
    <template #extra>
        <el-button
          type="primary"
          v-show="showButton"
          @click="onEdit"
        >编辑</el-button>
        <el-button 
          @click="onDel"
          v-show="showButton"
          class="ml-2">
          删除</el-button>
    </template>
  </el-page-header>
  <div class="apart"></div>
   <router-view></router-view>
</template>

<style lang="scss" scoped>
  :deep(.nav){
    width: 100%;
    height:200px;
    background-color: var(--el-color-nav);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    .el-affix{
    float: right; 
    }
    
  }
.apart{
  border-bottom-style:solid;
  border-color:var(--el-color-username);
}
</style>